<template>
  <crud-table-v2 url="/testStudentList" >
    <crud-table-header :inline="false">
      <crud-table-search hideReset>
        <template #search>
          <el-form-item label="姓名" prop="name">
            <el-input clearable placeholder="姓名" />
          </el-form-item>
          <el-form-item label="年龄" prop="age">
            <el-input clearable placeholder="年龄" />
          </el-form-item>
        </template>
      </crud-table-search>
      <crud-table-action>
        <crud-table-btn-add url="/testStudentList/add1"/>
      </crud-table-action>
    </crud-table-header>

    <!-- <crud-table-pagination > -->
      <crud-table-data>
        <el-table-column label="name" prop="name" algin="center" />
        <el-table-column label="age" prop="age" algin="center" />
        <crud-table-handler width="150px">
          <template #hander>
            <crud-table-btn-preview />
            <crud-table-btn-edit style="color: #67C23A;" url="/testStudentList/edit"/>
            <crud-table-btn-del style="color: #F56C6C;" url="/testStudentList/delete" />
          </template>
        </crud-table-handler>
      </crud-table-data>
    <!-- </crud-table-pagination> -->

    <crud-table-dialog :formProps="{labelPosition:'right'}" width="50%">
      <template #formDialog>
        <el-form-item label="姓名" prop="name">
          <el-input clearable placeholder="姓名" />
        </el-form-item>
        <el-form-item label="年龄" prop="age">
          <el-input clearable placeholder="年龄" />
        </el-form-item>
      </template>
    </crud-table-dialog>
  </crud-table-v2>
</template>

<script>
export default {
  data() {
    return {
      tableColumns: [
        {
          label: 'id',
          prop: 'id',
        },
        {
          label: 'info1',
          prop: 'info1',
          children: [
            {
              label: '学号',
              prop: 'stu_num',
            },
            {
              label: '姓名',
              prop: 'name',

            },
          ]
        },
        {
          label: '性别',
          prop: 'sex',
        },
        {
          label: '年龄',
          prop: 'age',
        },
        {
          label: 'info2',
          prop: 'info2',
          children: [
            {
              label: '手机号码',
              prop: 'phone',
            },
            {
              label: '证件号码',
              prop: 'IDCard',
            },
          ]
        },
        {
          label: '民族',
          prop: 'nation',
        },
        {
          label: '地址',
          prop: 'presentAddr',
        }
      ],
      formRules: {
          name: [{ required: true, message: '请输入姓名', trigger: ['change', 'blur'] }],
          age: [{ required: true, message: '请输入年龄', trigger: ['change', 'blur'] }],
        }
    }
  },
  methods: {
    tableLoaded(ev) {
      console.log(ev)
    },
    rowClick(ev) {
      console.log(ev)
    },
  }
}
</script>
